<template>
    <div>
        <el-form :model="searchForm" ref="forms" :inline="true">
            <el-form-item label="班组名称" prop="TeamName">
                <el-input  label="班组名称"  v-model="searchForm.TeamName" style="width:320px"/>
            </el-form-item>

            <el-form-item label="轮班方式" prop="ShiftWay">
                <el-select v-model="searchForm.ShiftWay" placeholder="轮班方式" allow-create filterable>
                    <el-option label="全部" value="全部"></el-option>
                    <el-option label="白班" value="白班"></el-option>
                    <el-option label="中班" value="中班"></el-option>
                    <el-option label="晚班" value="晚班"></el-option>
                </el-select> 
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
       


        <!--表单-->
        <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
            <el-table-column width="55"></el-table-column>
            <el-table-column prop="PlanCode" label="排班编号" ></el-table-column>
            <el-table-column prop="PlanName" label="排班名称" ></el-table-column>
            <el-table-column prop="TeamType" label="班组分类" ></el-table-column>
            <el-table-column prop="TeamCode" label="班组编号" ></el-table-column>

            <el-table-column prop="TeamName" label="班组名称" ></el-table-column>
            <el-table-column prop="ShiftDuration" label="轮班时长" ></el-table-column>
            <el-table-column prop="ShiftWay" label="轮班方式" ></el-table-column>
            <el-table-column prop="ChangeShiftWay" label="倒班方式" ></el-table-column>
            <el-table-column label="开始日期" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.StartDate | formatDateTime  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="结束日期" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.EndDate | formatDateTime  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" :show-overflow-tooltip="true" width="160">
                <template slot-scope="scope">
                    <el-button type="text" @click="details(scope.row)">明细</el-button>
                </template>
            </el-table-column>
        </el-table>


        
        <!--弹窗-->
        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="70%" >
            <PlanTeamDetails :model="model" v-if="dialogDomain.dialogVisible" />
        </el-dialog>
        <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />

    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
import PlanTeamDetails from './PlanTeamDetails.vue'
    export default{

        components: {
            Pagination,
            PlanTeamDetails
        },
        props:{
            Dates:{
                type:String,
                required:true
            }
        },
        mounted(){
            this.dataBind();
        },
        data() {
        return {
            //搜索字段
            searchForm: {
                TeamName: '',
                ShiftWay:'全部'
            },

            //数据模型
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false,
            model:{},
            
            //对话框对象
            dialogDomain: {
                title: '排班计划明细',
                dialogVisible: false
            },
        }
    },
    methods:{
        
        
        details(model) {
            this.dialogDomain.dialogVisible = true
            this.model = model
        },
        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset() {
            this.$refs.forms.resetFields()
        },
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
        //获取数据
        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/PlanCalendar/GetCurrentPlan',
            {
                params: {
                    PageIndex: this.pageDomain.PageIndex,
                    PageSize: this.pageDomain.PageSize,
                    Date: this.Dates,
                    TeamName: this.searchForm.TeamName,
                    ShiftWay:this.searchForm.ShiftWay
                }
            })
            .then(res => {
                this.tableData = res.Data;
                this.pageDomain.TotalCount = res.Count;
                this.isLoading = false;
            })
        } 
    }
        
}
</script>

<style scoped>

</style>